<script>
// import axios from 'axios'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import { DECREMENT } from '@/store/mutation-types'

export default {
  data() {
    return {
      
    }
  },

  methods: {
    add() {
      this.$store.commit({
        type: 'increment',
        num: 2
      })
    },
    // minus() {
    //   this.$store.commit('decrement', 2)
    // }
    ...mapMutations({
      decrement: DECREMENT
    }),
    ...mapMutations(['asyncIncrement']),
    // ...mapActions(['asyncIncrement'])

  },

  // computed: {
  //   count() {
  //     return this.$store.state.count
  //   },
  // },

  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },

  async mounted() {
    // console.log(this)
    // let result = await axios.get('http://localhost:9000/hotcate')
    // this.hotcate = result.data.data

    this.$store.dispatch('loadHotCate')
    // this.$store.commit('setHotCate')

    // console.log(this.$store.getters.doubleCount)
  }
}
</script>

<template>
  <div>
    <div>
      <button @click="decrement(10)">-</button>
      {{count}} {{doubleCount}}
      <button @click="add">+</button>
      <button @click="asyncIncrement">async +</button>
    </div>
    
    <ul>
      <li v-for="hot in $store.state.hotcate">
        {{hot.title}}
      </li>
    </ul>

    <br>
    <br>
  </div>
</template>

<style lang="scss" scoped>
button {
  width: 30px;
  height: 30px;
}
</style>
